<template>
 <div class="shop-info">
     <div class="shop-top">
         <img :src="shop.logo" >
         <span class="title">{{shop.name}}</span>
     </div>
     <div class="shop-middle">
         <div class="shop-middile-item shop-middle-left">
             <div class="info-sells">
                 <div class="sells-count">
                     {{shop.sell}}
                 </div>
                 <div class="sells-text">总销量</div>
             </div>
             <div class="info-goods">
                 <div class="goods-count">
                     {{shop.goodsCount}}
                 </div>
                 <div class="goods-text">全部宝贝</div>
             </div>
         </div>
         <div class="shop-middle-center"></div>
         <div class="shop-middle-item shop-middle-right">
             <table>
                 <tr v-for="(item,index) in shop.score" :key="index">
                     <td>{{item.name}}</td>
                     <td class="score" :class="{'score-better':item.isBetter}">{{item.score}}</td>
                      <td class="better" :class="{'better-better':item.isBetter}">
                          <span> {{item.isBetter?'高':'低'}}</span>
                      </td>
                 </tr>
             </table>
         </div>
     </div>
     <div class="shop-bottom">
         <div class="enter-shop">进店看看</div>
     </div>
 </div>
</template>

<script>

 export default {
  name:'DetailShopInfo',
  data () {
   return {
       
   };
  },
    props: {
        shop:{
           type:Object,
           defualt(){
               return {}
           }
       }
    },
  components: {},


  mounted() {},

  methods: {},

 }

</script>
<style scoped>
    .shop-info{
        margin-top:20px ;
    }
    .shop-top{
          display: flex;
          justify-content: flex-start;
    }
    .shop-top img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border:1px solid rgb(206, 202, 202);
    }
    .shop-top .title{
        height: 100%;
        font-size:20px ;
        font-weight: 600;
        margin-left:15px ;
        line-height: 50px;
    }
    .shop-top{
         height:10hv;
    }
    .shop-middle{
        display: flex;
        justify-content:space-around;
        margin-top: 20px;
    }
    .shop-middle .shop-middle-left{ 
      display: flex;
      font-weight: 600px;
      /* border-right: 1px solid rgb(173, 170, 170); */
      padding: 10px 0;
      text-align: center;
    }
    .shop-middle-center{
        width: 1;
        border: 1px solid rgb(206, 202, 202);
    }
    /* .shop-middle .info-sells{
     ]
    } */
    .goods-count, .sells-count{
        font-size: 25px;
    }
    .shop-middle .info-goods{
          margin-left:15px ;
          
    }
     .shop-middle .shop-middle-right td{
        padding: 5px;
    }
    .score,.better{
        color: rgb(105, 202, 8);
    }
    .better{
        color: white;
        background-color: rgb(105, 202, 8);
    }
    .score-better{
        color: red;
    }
    .better-better{
         color: white;
        background-color: red;
    }
    .shop-bottom{
        display: flex;
        justify-content: space-around;
      
        
    }
    .enter-shop{
        margin-top:10px ;
        padding: 10px 30px;
        background: rgb(236, 235, 235);
    }
</style>